let canvas = document.getElementById("c");
let ctx = canvas.getContext("2d");

//making the canvas full screen
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

//chinese characters - taken from the unicode charset
let chinese = `QWERTYUIOP{}ASDFGHJKL:"|ZXCVBNM<>?qwertyuiop[]\\asdfghjkl;'zxcvbnm,./`;
//converting the string into an array of single characters
chinese = chinese.split("");

let font_size = 10;
//an array of drops - one per column
let drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for (let x = 0; x < canvas.width / font_size; x++)
    drops[x] = 1;


//drawing the characters
function draw() {
    //Black BG for the canvas
    //translucent BG to show trail
    ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = "#666"; //green text
    ctx.font = font_size + "px arial";
    //looping over drops
    for (let i = 0; i < drops.length; i++) {
        //a random chinese character to print
        let text = chinese[Math.floor(Math.random() * chinese.length)];
        //x = i*font_size, y = value of drops[i]*font_size
        ctx.fillText(text, i * font_size, drops[i] * font_size);

        //sending the drop back to the top randomly after it has crossed the screen
        //adding a randomness to the reset to make the drops scattered on the Y axis
        if (drops[i] * font_size > canvas.height && Math.random() > 0.975)
            drops[i] = 0;

        //incrementing Y coordinate
        drops[i]++;
    }
}

setInterval(draw, 60);

document.querySelector(".home").onclick = function (event) {
    let ele;
    if (event.target.nodeName === "TD")
        ele = event.target.children[0];
    if (event.target.nodeName === "A")
        ele = event.target;
    window.location.href = ele.getAttribute("data-target");
};

function init(){
    canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    for (let x = 0; x < canvas.width / font_size; x++)
        drops[x] = 1;
}

let emptyFunction = (e) => {
};

// window界面大小更改函数 - 更改footer的position
let savedOnresize = emptyFunction;
if (typeof window.onresize === "function")
    savedOnresize = window.onresize;
window.onresize = function (e) {
    init();
    savedOnresize(e);
};
// 当前页面将被改变时触发此事件
let savedOnunload = emptyFunction;
if (typeof window.onunload === "function")
    savedOnunload = window.onunload;
window.onunload = function (e) {
    init();
    savedOnunload(e);
};
// 当前页面将被改变时触发此事件
let onbeforeunload = emptyFunction;
if (typeof window.onunload === "function")
    onbeforeunload = window.onunload;
window.onunload = function (e) {
    init();
    onbeforeunload(e);
};